<!--
 * @Author: 清酒吖
 * @Date: 2022-01-23 13:28:17
 * @Email:  
 * @LastEditors:  
 * @LastEditTime: 2022-01-24 23:15:15
 * @Description: 
 * @version: x 1.0
-->
<template>
  <div class="app-container">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item class="active">
        <span @click="searchFirst()">查看一级分类</span>
      </el-breadcrumb-item>
      <el-breadcrumb-item v-for="(item, index) in breadArr" :key="index">
        <span @click="changeBread(item, index)">{{ item.name }}</span>
      </el-breadcrumb-item>
    </el-breadcrumb>

    <br />
    <el-button
      type="success"
      icon="el-icon-plus"
      @click="
        dialogFormVisible = true;
        entity.parentId = 0;
        toAddCat();
      "
      >添加类目</el-button
    >

    <el-table :data="catList" style="width: 100%" ref="brandTable">
      <el-table-column type="selection"> </el-table-column>

      <el-table-column prop="id" label="分类ID" />
      <el-table-column prop="name" label="类目名称" width="200" />
      <el-table-column prop="templateId" label="模板ID" />
      <el-table-column prop="name" label="模板名称" />
      <el-table-column prop="brands" label="关联品牌">
        <template slot-scope="scope">
          <div>
            <p>{{ scope.row.template.brands | jsonFormat }}</p>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="spec" label="关联规格">
        <template slot-scope="scope">
          <div>{{ scope.row.template.spec | jsonFormat }}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
          <!-- 自定义展示 -->
          <div>
            <el-button
              size="mini"
              type="primary"
              :disabled="breadArr.length < 3 ? false : true"
              @click="
                breadArr.push(scope.row);
                findChild(scope.row.id);
              "
              >查看下级分类</el-button
            >
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="toUpdate(scope.row)"
              >修改</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>

    <br />

    <!-- 分页 -->
    <el-pagination
      style="float: right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="searchMap.pageNum"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="searchMap.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <!-- 添加类目dialog -->
    <el-dialog
      title="类目编辑"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
    >
      <el-form :model="entity" :rules="rules" ref="breadFrom">
        <el-form-item label="父类目">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item class="active">
              <span>一级分类</span>
            </el-breadcrumb-item>
            <el-breadcrumb-item
              v-for="(item, index) in saveBreadArr"
              :key="index"
            >
              <span>{{ item.name }}</span>
            </el-breadcrumb-item>
          </el-breadcrumb>
        </el-form-item>

        <el-form-item label="添加分类级别" prop="" label-width="130px">
          <el-radio-group v-model="radio" @change="searchCatForLevel1">
            <el-radio :label="1">一级分类</el-radio>
            <el-radio :label="2">二级分类</el-radio>
            <el-radio :label="3">三级分类</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item
          label="选择一级父类分类"
          label-width="130px"
          prop="firstParent"
          v-if="radio >= 2 ? true : false"
        >
          <el-select
            v-model="parentCatLevel1"
            filterable
            placeholder="请选择"
            @change="chooseLevel1"
          >
            <el-option
              v-for="item in cats1"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label="选择二级父类分类"
          label-width="130px"
          prop="secondParent"
          v-if="radio >= 3 ? true : false"
        >
          <el-select
            v-model="parentCatLevel2"
            filterable
            placeholder="请选择"
            @change="chooseLevel2"
          >
            <el-option
              v-for="item in cats2"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="类目名称" prop="name" label-width="130px">
          <el-input v-model="entity.name"></el-input>
        </el-form-item>
        <el-form-item label="选择模板" label-width="130px">
          <el-select v-model="entity.templateId" placeholder="请选择" size="">
            <el-option
              v-for="item in tmpls"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false;restBread()">取 消</el-button>
        <el-button type="primary" @click="save()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style>
span {
  cursor: pointer;
}
span:hover {
  color: #ea7293;
}
</style>

<script>
import {
  findCatAndTemplate,
  findCatList,
  addCat,
  selectCatById,
  modifyCat,
} from "@/api/cat";
import { findTemplateAll } from "@/api/template";

export default {
  data() {
    return {
      catList: [], // * 渲染表格
      searchMap: {
        pageNum: 1, // * 当前页数
        pageSize: 5, // * 当前页记录数
        where: 0, //data就是parent_id  ,默认查一级商品分类
      },
      total: 0, //总记录数
      pages: 0, // 总页数
      breadArr: [], //面包屑数组
      dialogFormVisible: false,
      entity: { parentId: 0 }, //要保存的商品分类
      tmpls: [], // 模板列表
      //表单校验规则
      rules: {
        name: [{ required: true, message: "请输入品牌名称", trigger: "blur" }],
        // firstParent: [
        //   { required: true, message: "请选择一级分类", trigger: "change" },
        // ],
        // secondParent: [
        //   { required: true, message: "请选择二级分类", trigger: "change" },
        // ],
      },
      radio: 1, // 分类级别
      catParent: 0, // 查看一级分类
      cats1: [], // 一级分类列表
      cats2: [], // 二级分类列表
      saveBreadArr: [],
      parentCatLevel1: "",
      parentCatLevel2: "",
    };
  },
  methods: {
    // * 每页显示记录数
    handleSizeChange(pageSizeNow) {
      // -> 监听当前页显示条数的变化
      console.log(pageSizeNow);
      this.searchMap.pageSize = pageSizeNow;
      this.search();
    },
    // * 分页
    handleCurrentChange(pageNumNow) {
      //-> 监听当前页的变化
      console.log(pageNumNow);
      this.searchMap.pageNum = pageNumNow;
      this.search();
    },
    // 分页+ 条件查询
    search() {
      // * 与服务器交互，调用查询方法接口
      findCatAndTemplate(this.searchMap).then((res) => {
        this.pages = res.pages;

        this.total = res.total;

        this.catList = res.pageList;
      });
    },
    // * 打开添加会话框
    toAddCat() {
      this.radio = 1;
      this.entity = { parentId: 0 };
      this.parentCatLevel1 = "";
      this.parentCatLevel2 = "";
    },
    // 打开修改会话框
    toUpdate(info) {
      this.entity = JSON.parse(JSON.stringify(info));
      console.log(info);

      // 与服务器交互,调用查询接口
      findCatList(this.catParent).then((res) => {
        this.cats1 = res.data;
      });

      switch (this.breadArr.length) {
        case 0:
          this.radio = 1;
          break;
        case 1:
          this.radio = 2;

          this.parentCatLevel1 = this.breadArr[0].id;
          break;
        case 2:
          this.radio = 3;

          this.parentCatLevel1 = this.breadArr[0].id;
          // * 查询二级分类,与服务器交互，调用查询接口
          findCatList(this.parentCatLevel1).then((res) => {
            this.cats2 = res.data;
          });
          this.parentCatLevel2 = this.breadArr[1].id;
          break;
        default:
          break;
      }
      this.dialogFormVisible = true;
    },
    // # 取消表单
    restBread(){
        this.$refs.breadFrom.resetFields();
    },
    // * 保存商品分类信息
    save() {
      this.$refs.breadFrom.validate((valid) => {
        if (valid) {
          if (this.entity.id == null || this.entity.id == "") {
            // 与服务器交互,调用添加方法接口
            addCat(this.entity).then((res) => {
              this.$notify({
                title: res.success ? "成功" : "失败",
                message: res.msg,
                type: res.success ? "success" : "error",
                duration: 3000,
              });
              this.search();
              this.dialogFormVisible = false;
            });
          } else {
            // * 与服务器交互,调用修改方法接口
            modifyCat(this.entity).then((res) => {
              this.$notify({
                title: res.success ? "成功" : "失败",
                message: res.msg,
                type: res.success ? "success" : "error",
                duration: 3000,
              });
              this.search();
              this.dialogFormVisible = false;
            });
          }
        } else {
          this.$message.error("保存失败！！！");
          return false;
        }
      });
    },
    // * 查看一级分类菜单
    searchFirst() {
      this.searchMap = {
        pageNum: 1, // * 当前页数
        pageSize: this.searchMap.pageSize,
        where: 0, // 查询条件,父类ID
      };
      this.breadArr = [];
      this.search();
    },
    // *  查看当前分类的子分类
    findChild(catId) {
      console.log(catId);
      this.searchMap.where = catId;
      this.search();
    },
    // * 查询当前分类
    changeBread(item, index) {
      this.searchMap.pageNum = 1;
      this.searchMap.where = item.id;
      this.breadArr.splice(index + 1);
      this.search();
    },
    // * 查看一级分类
    searchCatForLevel1() {
      if (this.radio == 1) {
        this.parentCatLevel1 = "";
        this.parentCatLevel2 = "";
        this.entity.parentId = 0;
      } else if (this.radio == 2) {
        this.parentCatLevel2 = "";
        this.entity.parentId = this.parentCatLevel1;
      } else if (this.radio == 3) {
        this.entity.parentId = this.parentCatLevel3;
      }
      // 与服务器交互,调用查询接口
      findCatList(this.catParent).then((res) => {
        this.cats1 = res.data;
      });
    },
    // * 选择的一级分类
    chooseLevel1(value) {
      console.log(value);
      if (this.radio == 2) {
        this.entity.parentId = this.parentCatLevel1;
      } else if (this.radio == 3) {
        this.parentCatLevel2 = "";
        // * 查询二级分类,与服务器交互，调用查询接口
        findCatList(value).then((res) => {
          this.cats2 = res.data;
        });
      }
    },
    // * 选择二级分类
    chooseLevel2(value) {
      console.log(value);
      this.entity.parentId = value;
    },
  },
  created() {
    // 查询第一级分类,parent_id = 0;
    this.search();
    // 查询所有的商品模板
    findTemplateAll().then((res) => {
      this.tmpls = res.data;
    });
  },
};
</script>

<style lang="scss">
</style>